<template>
  <article style="width: 100%; height: 100%; min-width: 700px;">
    <header class="admin_header">
      <span class="admin_header_title">
        &nbsp;
        <i class="el-icon-setting"></i>
        系统管理
      </span>
    </header>

    <section class="admin_main">
      <div class="admin_main_header">
        <el-button type="primary" size="small" style="float: left;" @click="openHospitalAddUI">
          <i class="el-icon-plus"></i>
          新增新管理员
        </el-button>
        <div class="admin_main_header_title">查找到{{filteredData.length}}个结果</div>
        <el-link class="admin_main_header_refresh" :underline="false" type="primary" @click="handleRefresh">
          <i class="el-icon-refresh"></i>
          刷新
        </el-link>
        <el-input class="admin_main_header_search" v-model="search" placeholder="输入机构名进行搜索" @keyup.enter.native="doFilter">
          <el-link style="padding-right: 5px;" slot="suffix" :underline="false" @click="doFilter">
            <i class="el-icon-search"></i>
            搜索
          </el-link>
        </el-input>
      </div>

      <!-- 信息表格 -->
      <div class="admin_main_main"> 
        <el-table
          v-loading="loading"
          :header-cell-style="{background: '#ECF1FE'}"
          :data="filteredData.slice((currentPage -1) * pageSize, currentPage * pageSize)"
          min-height="500px"
          :default-sort = "{prop: 'hospitalId', order: 'acending'}"
          highlight-current-row
          border
          stripe
        >
          <el-table-column label="检测机构编号" prop="hospitalId"> </el-table-column>
          <el-table-column label="检测机构名" prop="name"> </el-table-column>
          <el-table-column label="检测机构地址" prop="address"> </el-table-column>
          <el-table-column label="联系方式" prop="phone"> </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-link
                    type="primary"
                    :underline="false"
                    @click="openHospitalModifyUI(scope.$index, scope.row)"
                  >
                    修改
                  </el-link>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页显示  -->
        <el-pagination
          style="float: right; margin-top: 10px"
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="filteredData.length"
          layout="prev, pager, next, jumper"
        />
      </div>
    </section>

    <!-- edit dialog -->
    <aside class="editing_dialog">
    <el-dialog
      title="检测机构"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <el-form
        label-position="right"
        label-width="80px"
        :model="editingHospital"
      >
        <el-form-item label="机构名称">
          <el-input v-model="editingHospital.name"></el-input>
        </el-form-item>
        <el-form-item label="机构地址">
          <el-input v-model="editingHospital.address"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="editingHospital.phone" :disabled="editMode=='modify'"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="editHospital">确 定</el-button>
      </span>
    </el-dialog>
    </aside>
  </article>
</template>

<script>
export default {
  data() {
    return {
      filteredData:[],
      editingHospital: {
        hospitalId: null, // 传参时不需要设置
        name: "",
        address: "",
        phone: "",
      },

      search: "",
      loading: false,
      currentPage: 1,
      pageSize: 5,
    };
  },
  computed: {
    hospitals: function() {
      return this.$store.state.hospital.hospitals;
    },
    empty: function () {
      return this.hospitals==null || this.hospitals.length == 0;
    },
    editMode: function() {
      return this.$store.state.hospital.mode;
    },
    dialogVisible: function() {
      return this.editMode != "view";
    }
  },
  methods: {
    openHospitalAddUI: function () {
      this.editingHospital.name = "";
      this.editingHospital.address = "";
      this.editingHospital.phone = "";
      this.$store.commit("hospital/SET_MODE", "add");
    },
    openHospitalModifyUI: function (index, row) {
      this.editingHospital.hospitalId = row.hospitalId;
      this.editingHospital.address = row.address;
      this.editingHospital.name = row.name;
      this.editingHospital.phone = row.phone;
      this.$store.commit("hospital/SET_MODE", "modify");
    },
    editHospital: function () {
      if (this.editMode=="add"){
        console.log("try new hopistal", this.editingHospital);
        this.$store.dispatch("hospital/add_hospital", this.editingHospital);
      }
      if (this.editMode=="modify"){
        console.log("modify exists hopistal", this.editingHospital);
        this.$store.dispatch("hospital/modify_hospital", this.editingHospital);
      }
    },
    handleClose() {
      this.$confirm("确认关闭？")
        .then((opt) => {
          console.log("close", opt);
          this.$store.commit("hospital/SET_MODE", "view");
        })
        .catch((opt) => {
          console.log("close", opt);
        });
    },

    handlePageChange(val) {
      this.currentPage = val;
    },

    doFilter() {
      this.filteredData = this.hospitals.filter((item) => {
        return item.name.includes(this.search);
      });
    },

    async handleRefresh(){
      await this.$store.dispatch("hospital/refresh_hospital");
      this.doFilter();
    }
  },
  mounted() {
      this.handleRefresh();
  },
};
</script>

<style lang="scss" scoped>
.admin_header {
  background: #FFFFFF;
  border-bottom: 1px solid #DCDFE6;
  width: calc(100% - 60px);
  height: 50px;
  margin: 0px 30px;

  .admin_header_title {
    font-weight: bold;
    font-size: 22px;
    line-height: 50px;
    margin-left: 5px;
    border-left: 5px solid #21a6e6;
  }
}

.admin_main {
  margin: 30px 30px 0px 30px;
  width: calc(100% - 60px);

  .admin_main_header {
    height: 40px;
    line-height: 40px;
    margin-bottom: 30px;

    .admin_main_header_title {
      color: #919191;
      float: left;
      font-size: 14px;
      margin-left: 20px;
    }

    .admin_main_header_refresh {
      float: right;
      margin-left: 20px;
    }

    .admin_main_header_search {
      float: right;
      width: 260px;
    }
  }
}
</style>

<style lang="scss" scoped>

::v-deep .el-button--primary {
  color: #fff;
  background-color: #4875f6;
  border-color: #4875f6;
  -webkit-box-shadow: 0 5px 5px rgba(72,117,246,.15);
  box-shadow: 0 5px 5px rgba(72,117,246,.15);
}

::v-deep .el-button--primary:hover {
  background: #6d91f8;
  border-color: #6d91f8;
  color: #fff;
}

</style>